<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                style="width: 170px"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                style="width: 170px"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>

          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
    </div>
    <div class="box-style">
      <div class="top">
        <ad-table :data="assignList" u-table @sort-change="assignSortInitList"
                  :data-changes-scroll-top="assignIsScrollTop"
                  v-loading="assignInitLoading" @table-body-scroll="assignGetMoreList"
                  :searchQuery="assignSearchQuery" @search="assignGetInitList" @filter-change="assignFilterInitList"
                  :height="drawer === true ? tableHeight-300 :tableHeight" @cell-click="cellClick">
          <!--          <ad-table-column type="selection" ctype="selection" fixed/>-->
          <ad-table-column label="序号" type="index" ctype="index" fixed />
          <ad-table-column label="订单号" prop="orderSubNo" ctype="orderNo" sortable searchable>
            <!--                                    <template slot-scope="scope">-->
            <!--                                      <el-input size="mini" v-model="scope.row.orderSubNo"></el-input>-->
            <!--                                    </template>-->
          </ad-table-column>
          <ad-table-column label="制单人" prop="createUserName" w="3c2f" searchable sortable>
            <template v-slot="{row}">{{ row.createUserName }}
              <el-tooltip v-if="row.remark !== ''" placement="right" :content="row.remark">
                <span>⚠️</span>
              </el-tooltip>
            </template>
          </ad-table-column>
          <ad-table-column label="制单时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="订单状态" prop="status" w="4c2f" dictName="order_status" filterable>
            <template slot-scope="{row}">
              <slot :row="row" v-if="row.status == 3 || row.status == 305">
                <div class="tdFloat">
                  <span class="el-link--inner">{{parseStatus(dict, 'order_status', row.status)}}</span>
                  <i v-show="row.isAdd" class="el-icon-check"></i></div>
              </slot>
              <slot :row="row" v-else>{{parseStatus(dict, 'order_status', row.status)}}</slot>
            </template>
          </ad-table-column>
          <ad-table-column label="运输方式" prop="transportType" dictName="transport_way" filterable w="4c1f"/>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" sortable
                           column-key="startCodes"
                           :filters="startCodeArr"/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" sortable
                           column-key="destinationCodes"
                           :filters="destinationCodeArr"/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="收货人" prop="consigneeName" w="5c2f" searchable/>
          <ad-table-column label="收货人电话" prop="consigneePhone" ctype="phone-2f" searchable/>
          <ad-table-column label="收货地址" prop="takeAddress" width="200"/>
          <ad-table-column label="到付金额" prop="deliveryPayFee" w="3c2f" searchable/>
          <ad-table-column label="送车方式" prop="takeType" w="4c2f" dictName="takecar_type" filterable/>
          <ad-table-column label="委托人" prop="linkmanName" w="3c2f" searchable/>
          <ad-table-column label="委托人电话" prop="linkmanPhone" ctype="phone-2f" searchable/>
          <ad-table-column lang="备注" label="订单备注" prop="remark" ctype="remark"/>
          <ad-table-column fixed="right" label="操作" width="80">
            <template slot-scope="scope">
              <el-button @click.stop="goBack(scope.row)" type="danger" size="mini">回退</el-button>
            </template>
          </ad-table-column>
        </ad-table>
      </div>
      <div v-show="drawer" id="bottom" class="bottom" style="min-height: 290px">
        <div class="content">
          <div class="left" style="width: 380px">
            <div class="form-wrapper assign" style="position: relative">
              <h3>发运信息</h3>
              <div class="form-content">
                <el-form ref="saveForm" :model="saveForm" inline size="mini" label-position="right"
                         label-width="auto" :rules="rules">
                  <el-row v-if="isWaybill">
                    <el-col>
                      <el-form-item label="运单编号：" prop="transportNo">
                        <el-input v-model="saveForm.transportNo" disabled/>
                        <!--                        <i class="el-icon-edit" @click="signToTransport"-->
                        <!--                           style="cursor: pointer;position: absolute;right:10px;top:6px;font-size: 16px"></i>-->
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="承运类型：" prop="type">
                        <ad-status-select-noclear @change="change_transport_type" :disabled="isWaybill"
                                                  v-model="saveForm.type"
                                                  :dict="dict.transport_type"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="运输方式：" prop="transportType">
                        <ad-status-select-noclear @change="change_transport_mode" :disabled="isWaybill"
                                                  v-model="saveForm.transportType"
                                                  :dict="dict.transport_way"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="公司名称：" prop="company">
                        <!--                        <el-input :disabled="dialogSettlerVisible || isWaybill" v-model="saveForm.company"-->
                        <!--                                  @focus="showGetList"/>-->
                        <el-input :disabled="!saveForm.type || dialogSettlerVisible || isWaybill"
                                  v-model="saveForm.company" @focus="showGetList"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item v-if="saveForm.transportType==2" label="车厢号：">
                        <el-input clearable
                                  v-model="saveForm.compartmentNo"/>
                      </el-form-item>
                      <el-form-item v-else label="司机名称：">
                        <el-input clearable @clear="clearDriver"
                                  :disabled="!saveForm.company || dialogDriverVisible || isWaybill"
                                  @focus="showDriverList"
                                  v-model="saveForm.driverName"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="结算人：" prop="settlementName">
                        <el-input :disabled="!saveForm.type || dialogSettlerVisible || isWaybill"
                                  v-model="saveForm.settlementName"
                                  @focus="showGetList"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item v-if="saveForm.transportType==2" label="票号：">
                        <el-input clearable
                                  v-model="saveForm.ticketNo"/>
                      </el-form-item>
                      <el-form-item v-else label="司机电话：">
                        <el-input :disabled="!saveForm.company || dialogDriverVisible || isWaybill"
                                  @focus="showDriverList"
                                  v-model="saveForm.driverPhone"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col :span="12">
                      <el-form-item label="结算电话：" prop="settlementPhone">
                        <el-input :disabled="!saveForm.type || dialogSettlerVisible || isWaybill"
                                  v-model="saveForm.settlementPhone"
                                  @focus="showGetList"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item v-if="saveForm.transportType!=2" label="大板车牌：">
                        <el-input :disabled="!saveForm.company || dialogDriverVisible || isWaybill"
                                  @focus="showDriverList"
                                  v-model="saveForm.licensePlateNumber"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row id="feeCss" :gutter="5">
                    <el-col :span="8">
                      <el-form-item label="代收费用：" prop="collectionFee">
                        <span>{{saveForm.collectionFee?saveForm.collectionFee:'-'}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="应付运费：" prop="pickCarFee">
                        <span>{{saveForm.pickCarFee?saveForm.pickCarFee:'-'}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="欠返运费：" prop="backReturnFee">
                        <span>{{saveForm.backReturnFee?saveForm.backReturnFee:'-'}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div style="position: absolute;right:12px;top:3px" v-if="!$route.query.id">
<!--                <el-button size="mini" v-if="isWaybill" @click="signToTransport">修改装车</el-button>-->
<!--                <el-button size="mini" v-else @click="signToTransport">签收装车</el-button>-->
                <el-button size="mini" @click="queryList">重置</el-button>
              </div>
            </div>
          </div>
          <div style="width: calc(100% - 380px);position: relative">
            <el-tabs v-model="editableTabsValue" type="border-card" @edit="editTab" @tab-remove="removeTab">
              <el-tab-pane
                  v-for="(item, j) in editableTabs"
                  :closable="j==0?false:true"
                  :key="item.name"
                  :label="item.title"
                  :name="item.name"
              >
                <div style="display:flex;">
                  <div :class="roadPoint[j].bottomTableData?'middle':'middle line'"
                       :style="{'width': '260px', 'height':rightHeight}">
                    <div class="form-wrapper driver">
                      <h3>交付信息</h3>
                      <div class="form-content" style="padding-top: 6px;padding-bottom: 0">
                        <el-form inline size="mini" label-position="right" label-width="auto">
                          <el-row>
                            <el-col>
                              <el-form-item label="交付方式：" style="margin-bottom: 7px">
                                <ad-status-select-noclear :disabled="!roadPoint[j].bottomTableData"
                                                          v-model="roadPoint[j].type" @change="type_change(j)"
                                                          :dict="dict.delivery_type"/>
                              </el-form-item>
                            </el-col>
                            <el-col>
                              <el-form-item v-if="roadPoint[j].type!=4&&roadPoint[j].type!=2" label="到达网点："
                                            style="margin-bottom: 7px">
                                <el-select :disabled="roadPoint[j].type!=1&&roadPoint[j].type!=3"
                                           v-model="roadPoint[j].siteId" placeholder="选择网点" filterable
                                           @change="getReceiveUser(j)">
                                  <el-option v-for="item in siteArray" :key="item.id" :label="item.name"
                                             :value="item.id"></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item v-if="roadPoint[j].type==4" label="中转城市：" style="margin-bottom: 7px">
                                <ad-city-select v-model="roadPoint[j].transferCityCode"/>
                              </el-form-item>
                            </el-col>
                            <el-col>
                              <el-form-item label="接车人员：" style="margin-bottom: 7px">
                                <el-select v-if="roadPoint[j].type!=2&&roadPoint[j].type!=4"
                                           v-model="roadPoint[j].receiveUser" placeholder="选择装车人员"
                                           filterable @change="user_change(j)">
                                  <el-option v-for="item in receiveUserArray[j]" :key="item.id"
                                             :label="item.nickName"
                                             :value="item.nickName"></el-option>
                                </el-select>
                                <el-input v-else :disabled="roadPoint[j].type!=4"
                                          v-model="roadPoint[j].receiveUser"/>
                              </el-form-item>
                            </el-col>
                            <el-col>
                              <el-form-item label="联系电话：" style="margin-bottom: 7px">
                                <el-input :disabled="roadPoint[j].type!=4"
                                          v-model="roadPoint[j].receivePhone"/>
                              </el-form-item>
                            </el-col>
                            <el-col>
                              <el-form-item label="接车地址：" style="margin-bottom: 7px">
                                <el-input :disabled="roadPoint[j].type!=4"
                                          v-model="roadPoint[j].receiveAddress"/>
                              </el-form-item>
                            </el-col>
                            <el-col
                                v-if="(roadPoint[j].type==1||roadPoint[j].type==3)&&roadPoint[j].bottomTableData"
                                style="margin-bottom: 0px">
                              <el-form-item label="结算方式：">
                                <ad-status-select-noclear v-model="roadPoint[j].settlementType"
                                                          :dict="dict.settlement_type"/>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </el-form>
                      </div>
                    </div>
                  </div>
                  <div class="right" v-if="roadPoint[j].bottomTableData">
                    <ad-table :ref="'order'+j" class="editTable" :data="roadPoint[j].bottomTableData" u-table
                              :height="bottomTabHeight" :data-changes-scroll-top="false">
                      <ad-table-column operation width="50" :operates="operates"/>
                      <el-table-column label="应付承运费" prop="cost" ctype="orderNo" width="90">
                        <template slot-scope="scope">
                          <el-input-number :controls="false" placeholder="必填" style="width: 67px" size="mini"
                                           @input="onInput($event)"
                                           @change="clacFee(scope.$index)"
                                           v-model="scope.row.cost"
                                           :key="j" min="0"
                                           max="99999"></el-input-number>

                        </template>
                        <!--                  <template slot-scope="scope">-->
                        <!--                    <el-input size="mini" v-model="scope.row.pickCarFee" maxLength="8"></el-input>-->
                        <!--                  </template>-->
                      </el-table-column>
                      <!--                      <el-table-column label="是否代收" prop="hasCollection" width="70">-->
                      <!--                        <template slot-scope="scope">-->
                      <!--                          <el-switch @change="clacFee(scope.$index)" inactive-color="#FF4D4F"-->
                      <!--                                     :disabled="!(roadPoint[j].type==2) || !scope.row.deliveryPayFee"-->
                      <!--                                     v-model="scope.row.hasCollection">-->
                      <!--                          </el-switch>-->
                      <!--                        </template>-->
                      <!--                        &lt;!&ndash;                  <template slot-scope="scope">&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                    <el-input size="mini" v-model="scope.row.pickCarFee" maxLength="8"></el-input>&ndash;&gt;-->
                      <!--                        &lt;!&ndash;                  </template>&ndash;&gt;-->
                      <!--                      </el-table-column>-->
                      <ad-table-column label="订单号" prop="orderSubNo"/>
                      <ad-table-column label="制单人" prop="createUserName" w="3c2f"/>
                      <ad-table-column label="车辆名称" prop="carName" w="4c2f"/>
                      <ad-table-column label="车架号" prop="vin" ctype="vin-2f"/>
                      <ad-table-column label="出发地" prop="startCode" ctype="city"/>
                      <ad-table-column label="目的地" prop="destinationCode" ctype="city"/>
                      <ad-table-column label="到付金额" prop="deliveryPayFee" w="3c2f"/>
                      <ad-table-column width="auto"/>
                    </ad-table>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
            <div style="position: absolute;right:12px;top:3px">
<!--              <el-button plain size="mini" type="danger" @click="goBack">回退</el-button>-->
              <el-button size="mini" type="info" plain @click="drawer = false">取消</el-button>
              <el-button size="mini" type="primary" plain @click="addTab(editableTabsValue)">添加途径点</el-button>
              <el-button size="mini" type="primary" v-if="saveForm.transportType!=2" plain @click="addTabLast()">预留板位
              </el-button>
              <el-button size="mini" type="primary" plain @click="save">保存</el-button>
              <el-button v-if="$route.query.id" size="mini" type="primary" plain @click="linkRecord">取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--签收装车-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择运单"
        :visible.sync="dialogVisible"
        width="840px"
        class="customerFormDialog"
    >
      <ad-table id="bottomTable" :data="waybillTableData" height="400" u-table>
        <ad-table-column label="运单号" prop="transportNo"/>
        <ad-table-column label="运单创建人" prop="createUserName" w="3c2f"/>
        <ad-table-column label="运输路线" prop="line" ctype="line" w="4c2f"/>
        <ad-table-column label="承运公司" prop="companyName" ctype="vin-2f"/>
        <ad-table-column label="结算人" prop="settlementName" w="3c2f"/>
        <ad-table-column label="司机" prop="driverName" w="3c2f"/>
        <ad-table-column label="操作" width="100">
          <template v-slot="{row}">
            <el-button size="mini" style="padding: 3px 15px" type="primary" plain @click="selectData(row)">选择
            </el-button>
          </template>
        </ad-table-column>
      </ad-table>
      <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
    <!--查找结算列表信息-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择结算人"
        :visible.sync="dialogSettlerVisible"
        width="730px"
        class="customerFormDialog"
    >
      <settler-manage ref="settlerManage" :type="saveForm.type" @select="selectLink" :id="data.orderId"
                      :visible.sync="dialogSettlerVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addSettlerList" size="small">新 增</el-button>
              <el-button @click="dialogSettlerVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>

    <!--查找司机列表信息-->
    <el-dialog
        :show-close="true"
        :closeOnClickModal="false"
        title="选择司机"
        :visible.sync="dialogDriverVisible"
        width="850px"
        class="customerFormDialog"
    >
      <driver-manage ref="driverManage" @select="selectDriverLink" :id="saveForm.companyId"
                     :visible.sync="dialogDriverVisible"/>
      <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addDriverList" size="small">新 增</el-button>
              <el-button @click="dialogDriverVisible = false" size="small">取 消</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as assignApiGetList} from '@/api/transportop/assign';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
  import AdCitySelect from '@/components/AdCitySelect'
  import apis from '@/api/pick/wait'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import apiUser from '@/api/system/user';
  import {parseStatus, parseCityCode} from '@/utils/code'
  import {mapGetters} from "vuex";

  export default {
    name: 'transportop-assign',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      AdStatusSelect,
      AdStatusSelectNoclear,
      SettlerManage,
      AdCitySelect,
      DriverManage
    },
    dicts: ['order_status', 'pickcar_status', "verifycar_status", "pick_stock_status", "takecar_type", "settlement_type", "transport_type", "delivery_type", 'transport_way'],
    mixins: [adTable([
      {name: 'assign'},
    ])],
    computed: {
      ...mapGetters(['allCityData'])
    },
    data() {
      return {
        drawer: false,
        noData,
        siteArray: [],
        receiveUserArray: [
          []
        ],
        waybillTableData: [],
        roadPoint: [
          {
            type: 1,
            siteId: null,
            receiveUser: null,
            receivePhone: null,
            receiveAddress: null,
            settlementType: null,
            transferCityCode: null,
            bottomTableData: [],
          }
        ],
        startCodeArr: [],
        destinationCodeArr: [],
        isWaybill: false,
        rightHeight: 'calc(36vh - 37px)',
        searchQuery: {
          beginSearchTime: null,
          endSearchTime: null,
          siteId: null
        },
        editableTabsValue: '1',
        editableTabs: [
          {
            title: '途径点1',
            name: '1',
          }
        ],
        tabIndex: 1,
        tableHeight: 440,
        bottomTabHeight: 300,

        saveForm: {
          id: null, //运单ID
          transportNo: null,
          type: null,
          transportType: 1,
          compartmentNo: null,
          ticketNo: null,
          company: null,
          collectionFee: null,
          backReturnFee: null,
          companyId: null,
          pickCarFee: null,
          settlementId: null,
          settlementName: null,
          settlementPhone: null,
          driverId: null,
          driverName: null,
          driverPhone: null,
          driverCardNumber: null,
          licensePlateNumber: null
        },
        inspectForm: {
          specification: undefined,
          towHook: undefined,
          ashtray: undefined,
          toolkit: undefined,
          antenna: undefined,
          key: undefined,
          warningSign: undefined,
          licensePlateFrame: undefined,
          aidPacket: undefined,
          footPad: undefined,
          airPump: undefined,
          cigarLighter: undefined,
          spareTire: undefined,
          jack: undefined,
          bellCover: undefined,
          vin: undefined,
          km: undefined,
          remark: undefined,
        },
        rules: {
          // company: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ],
          // settlementName: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ],
          // settlementType: {required: true, message: '必选', trigger: 'blur'},
          // settlementPhone: [
          //   {required: true, message: '必选', trigger: 'blur'},
          // ]
        },
        inspectRules: {
          vin: [
            {required: true, message: '必填', trigger: 'blur'},
          ],
          km: [
            {required: true, message: '必填', trigger: 'blur'},
          ]
        },
        operates: {
          list: [
            {
              label: '移除',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                return false;
              },
              method: (index, row) => {
                this.del(row, index);
              }
            }
          ]
        },
        data: {},
        dialogVisible: false,
        dialogSettlerVisible: false,
        dialogDriverVisible: false,
      }
    },
    created() {
      let self = this;
      self.assignGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight  - 160;
        // self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 160;
        // self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })
      //获取出发地目的地
      api.getSdCodes().then(res => {
        res.data.startCodes.forEach(d => {
          self.startCodeArr.push({
            value: d,
            text: parseCityCode(self.allCityData, d)
          })
        })
        res.data.destinationCodes.forEach(d => {
          self.destinationCodeArr.push({
            value: d,
            text: parseCityCode(self.allCityData, d)
          })
        })
      })
      //获取网点信息
      this.getSiteList()
      // get().then(res => {
      //   this.topTableData = res.data
      //   this.bottomTableData = res.data
      // })

      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(36vh - 37px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(36vh - 17px)'
      }

    },
    methods: {
      assignApiGetList, parseStatus, getSuggestCompanyList,
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      //改变交付方式
      type_change: function (i) {
        let self = this;
        self.roadPoint[i].siteId = null;
        self.roadPoint[i].receiveUser = null;
        self.roadPoint[i].receivePhone = null;
        self.roadPoint[i].receiveAddress = null;
        self.roadPoint[i].settlementType = null;
        self.roadPoint[i].transferCityCode = null;
        self.receiveUserArray[i] = [];
        if (self.roadPoint[i].type == 2 && self.roadPoint[i].bottomTableData.length > 0) {
          self.roadPoint[i].receivePhone = self.roadPoint[i].bottomTableData[0].consigneePhone;
          self.roadPoint[i].receiveAddress = self.roadPoint[i].bottomTableData[0].takeAddress;
          self.roadPoint[i].receiveUser = self.roadPoint[i].bottomTableData[0].consigneeName;
          self.clacFee()
        }
        if (self.roadPoint[i].type != 2 && self.roadPoint[i].bottomTableData.length > 0) {
          self.roadPoint[i].bottomTableData.forEach(d => {
            d.hasCollection = false;
          })
        }
        if (self.roadPoint[i].type != 2) {
          self.saveForm.collectionFee = null;
          self.saveForm.backReturnFee = null;
        }
      },
      //改变承运类型
      change_transport_type: function (e) {
        let self = this;
        self.saveForm.companyId = null
        self.saveForm.company = null
        self.saveForm.settlementId = null
        self.saveForm.settlementName = null
        self.saveForm.settlementPhone = undefined
        self.saveForm.driverName = null;
        self.saveForm.driverPhone = null;
        self.saveForm.driverCardNumber = null;
        self.saveForm.licensePlateNumber = null
        self.saveForm.collectionFee = null;
        self.saveForm.transportNo = null;
        self.saveForm.id = null;
        // self.saveForm.transportType = null;
        self.saveForm.compartmentNo = null;
        self.saveForm.ticketNo = null;
        self.saveForm.backReturnFee = null;
        self.saveForm.backReturnFee = null;
        if(e == 1){
          apis.getSuggest({businessType: 1}).then((res => {
            self.saveForm.companyId = res.data[0].companyId
            self.saveForm.company = res.data[0].companyName
            self.saveForm.settlementId = res.data[0].linkmanId
            self.saveForm.settlementName = res.data[0].linkmanName
            self.saveForm.settlementPhone = res.data[0].linkmanPhone
          }))
        }
      },
      //改变运输方式
      change_transport_mode: function (val) {
        let self = this;
        console.log(self.editableTabs)
        if (self.saveForm.transportType == 2) {
          self.editableTabs.forEach((d, i) => {
            if (d.title == '预留板位') {
              self.removeTab((i + 1) + '');
            }
          })
        }
      },
      //添加途径点
      addTab(targetName) {
        let self = this;
        self.roadPoint.push({
          type: 1,
          siteId: null,
          receiveUser: null,
          receivePhone: null,
          receiveAddress: null,
          settlementType: null,
          transferCityCode: null,
          bottomTableData: []
        })
        self.receiveUserArray.push([])
        // let newTabName = ++self.tabIndex + '';
        let newTabName = self.editableTabs.length + 1 + '';
        console.log(newTabName);
        self.editableTabs.push({
          title: '途径点' + newTabName,
          name: newTabName,
        });
        self.editableTabsValue = newTabName;
      },
      //添加板位
      addTabLast: function () {
        let self = this;
        self.roadPoint.push({
          type: 1,
          siteId: null,
          receiveUser: null,
          receivePhone: null,
          receiveAddress: null,
          settlementType: '',
          transferCityCode: null,
          bottomTableData: null
        })
        self.receiveUserArray.push([])
        let newTabName = self.editableTabs.length + 1 + '';
        self.editableTabs.push({
          title: '预留板位',
          name: newTabName,
        });
        self.editableTabsValue = newTabName;
      },
      //移除途径点
      removeTab: function (targetName) {
        let self = this;
        let tabs = self.editableTabs;
        let activeName = self.editableTabsValue;
        // self.tabIndex = Number(self.tabIndex) - 1;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        if (self.roadPoint[Number(targetName) - 1].bottomTableData) {
          self.roadPoint[Number(targetName) - 1].bottomTableData.forEach(d => {
            // self.assignList.unshift(d);
            self.assignList.forEach(_d => {
              if (_d.id == d.id) {
                _d.isAdd = false
              }
            })
          })
          self.roadPoint[Number(targetName) - 1].bottomTableData = [];
        }
        self.roadPoint.splice(Number(targetName) - 1, 1);
        self.receiveUserArray.splice(Number(targetName) - 1, 1)
        self.editableTabs = tabs.filter(tab => tab.name !== targetName);
        self.editableTabs.forEach((d, i) => {
          d.title = d.title != '预留板位' ? '途径点' + (i + 1) : '预留板位';
          d.name = i + 1 + ''
        })
        console.log(self.editableTabs.length, activeName)
        if (self.editableTabs.length < Number(activeName)) {
          activeName = self.editableTabs.length + ''
        }
        self.editableTabsValue = activeName;
      },
      editTab: function (targetName, action) {
        let self = this;
        console.log(targetName, action);
        // setTimeout(function () {
        //   let tabs = self.editableTabs;
        //   let num = Number(targetName) - 1;
        //   tabs.forEach((d, i) => {
        //     if (i >= num) {
        //       d.title = d.title != '预留板位' ? '途径点' + Number(d.name) - 1 + '' : '预留板位';
        //       d.name = Number(d.name) - 1 + ''
        //     }
        //   })
        // },500)
      },
      //获取装车人员
      getReceiveUser: function (i) {
        let self = this;
        self.receiveUserArray[i] = [];
        self.roadPoint[i].receiveUser = null;
        self.roadPoint[i].receiveAddress = null;
        if (self.roadPoint[i].siteId) {
          self.roadPoint[i].receiveAddress = (self.siteArray.filter(row => row.id == self.roadPoint[i].siteId).map(row => {
            return row.address
          }))[0]
          api.getSiteInfo(self.roadPoint[i].siteId).then(res => {
            res.data.unshift({
              nickName: '请选择',
              phone: null
            })
            self.receiveUserArray[i] = res.data
            self.roadPoint[i].receiveUser = res.data[0].nickName;
            self.roadPoint[i].receivePhone = res.data[0].phone;
            console.log(self.receiveUserArray[i])
          })
        }
      },
      //改变装车人
      user_change: function (i) {
        let self = this;
        self.roadPoint[i].receivePhone = null;
        if (self.roadPoint[i].receiveUser) {
          self.roadPoint[i].receivePhone = (self.receiveUserArray[i].filter(row => row.nickName == self.roadPoint[i].receiveUser).map(row => {
            return row.phone
          }))[0]
        }
      },
      //查询
      queryList: function () {
        let self = this;
        self.isWaybill = false;
        self.roadPoint = [
          {
            type: 1,
            siteId: null,
            receiveUser: null,
            receivePhone: null,
            receiveAddress: null,
            settlementType: null,
            transferCityCode: null,
            bottomTableData: [],
          }
        ];
        self.clearFrom();
        self.editableTabsValue = '1';
        self.editableTabs = [
          {
            title: '途径点1',
            name: '1',
          }
        ];
        self.tabIndex = 1;
        self.assignGetInitList()
      },
      getSiteList: function () {
        let self = this;
        apiUser.getSiteList().then(res => {
          self.siteArray = res.data
          // setTimeout(function () {
          self.isEdit();
          // }, 200)
        })
      },
      //修改
      isEdit: function () {
        let self = this;
        console.log(self.$route.query.id)
        if (self.$route.query.id) {
          let data = {};
          self.editableTabs = [];
          self.roadPoint = [];
          self.receiveUserArray = [];
          api.transportDetails(self.$route.query.id).then(res => {
            data = res.data;
            self.saveForm.type = data.type;
            self.saveForm.transportType = data.transportType;
            self.saveForm.compartmentNo = data.compartmentNo;
            self.saveForm.ticketNo = data.ticketNo;
            self.saveForm.transportNo = data.transportNo;
            self.saveForm.company = data.cargoCompany;
            self.saveForm.collectionFee = data.collectionFee;
            self.saveForm.backReturnFee = data.backReturnFee;
            self.saveForm.companyId = data.supplierId;
            self.saveForm.pickCarFee = data.driverFee;
            self.saveForm.settlementId = data.settlementId;
            self.saveForm.settlementName = data.settlementUser;
            self.saveForm.settlementPhone = data.settlementPhone;
            self.saveForm.driverId = data.driverId;
            self.saveForm.driverName = data.driverName;
            self.saveForm.driverPhone = data.driverPhone;
            self.saveForm.licensePlateNumber = data.licensePlateNumber;
            data.transportLevelList.forEach((d, i) => {
              if (d.reserved == 1) {
                self.editableTabs.push({
                  title: '预留板位',
                  name: (i + 1) + '',
                })
              } else {
                self.editableTabs.push({
                  title: '途径点' + (i + 1),
                  name: (i + 1) + '',
                })
              }
              self.receiveUserArray.push([]);
              if (d.type == 1 || d.type == 3) {
                api.getSiteInfo(d.siteId).then(res => {
                  self.receiveUserArray[i] = res.data
                })
                d.transportLevelDetailList.forEach(d_ => {
                  d_.createUserName = d_.orderCreateUserName
                  d_.id = d_.orderId
                })
                if (d.transportLevelDetailList.length == 0) {
                  d.transportLevelDetailList = null
                }
                self.roadPoint.push({
                  id: d.id,
                  type: d.type,
                  siteId: d.siteId,
                  receiveUser: d.receiveUser,
                  receivePhone: d.receivePhone,
                  receiveAddress: d.receiveAddress,
                  settlementType: d.settlementType,
                  transferCityCode: d.destinationCode,
                  bottomTableData: d.transportLevelDetailList,
                })
              } else {
                d.transportLevelDetailList.forEach(d_ => {
                  d_.createUserName = d_.orderCreateUserName
                  d_.id = d_.orderId
                })
                self.roadPoint.push({
                  id: d.id,
                  type: d.type,
                  siteId: d.siteId,
                  receiveUser: d.receiveUser,
                  receivePhone: d.receivePhone,
                  receiveAddress: d.receiveAddress,
                  settlementType: d.settlementType,
                  transferCityCode: d.destinationCode,
                  bottomTableData: d.transportLevelDetailList,
                })
              }
            })
          })
        }
      },
      //取消修改
      linkRecord() {
        let self = this;
        self.$router.push({path: '/transportop/assignRecord'});
      },
      cellClick(row, column, event) {
        let self = this;
        self.drawer = true;
        switch (column.property) {
          case 'status':
            if (row.status == 3 || row.status == 305) {
              if (row.isAdd) {
                return;
              }
              row.cost = undefined;
              if (row._row) {
                row._row.cost = undefined
              }
              let num = Number(self.editableTabsValue) - 1;
              if (self.roadPoint[num].type == 2) {
                if (self.roadPoint[num].bottomTableData.length == 0) {
                  self.roadPoint[num].receivePhone = row.consigneePhone;
                  self.roadPoint[num].receiveAddress = row.takeAddress;
                  self.roadPoint[num].receiveUser = row.consigneeName;
                  // self.roadPoint[num].hasCollection
                } else {
                  if (self.roadPoint[num].receiveUser != row.consigneeName) {
                    self.$notify({
                      title: '提示',
                      message: '请选择相同的接车人！',
                      position: 'bottom-right',
                      type: 'warning'
                    });
                    return
                  }
                }
              }
              row.isAdd = true;
              console.log(row)
              self.roadPoint[num].bottomTableData.push(row._row ? row._row : row)
              // self.assignList.forEach((d, i) => {
              //   if (d.id == row.id) {
              //     self.assignList.splice(i, 1)
              //   }
              // })

              self.clacFee();
            }
            break
          default:
            self.data = row;
        }
      },
      goBack (row) {
        let self = this
        self.$confirm('是否确定回退?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.verifyReturnAddVerify({
              orderIdList:[row.id]
          }).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '提示',
                message: '回退成功！',
                position: 'bottom-right',
                type: 'success'
              })
            }
          })
        }).catch(() => {
        })
      },
      onInput(e) {
        let self = this;
        console.log(e)
        self.$forceUpdate();
      },
      //计算提车费用
      clacFee: function (index) {
        let self = this;
        if (self.saveForm.transportType == 2) {
          if (index == 0) {
            self.roadPoint.forEach((_d, i) => {
              let cost = JSON.parse(JSON.stringify(_d.bottomTableData[0].cost));
              _d.bottomTableData.forEach((d, j) => {
                d.cost = JSON.parse(JSON.stringify(cost));
              })
              console.log(_d.bottomTableData)
              let name = 'order' + i;
              self.$refs[name][0].$refs.table.reloadData(_d.bottomTableData)
            })
          }
        }
        let pickCarFee = 0;
        let collectionFee = 0; //代收费用
        let backReturnFee = 0; //前返运费
        self.saveForm.collectionFee = null;
        self.saveForm.backReturnFee = null;
        self.saveForm.pickCarFee = null;
        let flag = false;
        let num = Number(self.editableTabsValue) - 1;
        self.roadPoint.forEach((_d, j) => {
          _d.bottomTableData.forEach(d => {
            if (!isNaN(d.cost)) {
              pickCarFee = pickCarFee + Number(d.cost);
            }
          })
          let name = 'order' + j;
          self.$refs[name][0].$refs.table.reloadData(_d.bottomTableData)
        })
        self.saveForm.pickCarFee = pickCarFee
        self.roadPoint.forEach((_d, i) => {
          if (_d.type == 2) {
            _d.bottomTableData.forEach((d, j) => {
              if (d.deliveryPayFee) {
                flag = true
                collectionFee = collectionFee + d.deliveryPayFee
              }
            })
          }
        })
        if (flag) {
          backReturnFee = collectionFee - pickCarFee;
          self.saveForm.collectionFee = collectionFee;
          self.saveForm.backReturnFee = backReturnFee;
        }
      },
      //移除
      del: function (row, i) {
        console.log(row, i)
        row.cost = null;
        let self = this;
        let num = Number(self.editableTabsValue) - 1;
        self.assignList.forEach(d => {
          if (d.id == row.id) {
            d.isAdd = false
          }
        })
        let flag = true;
        self.assignList.forEach(d => {
          if (d.id == row.id) {
            flag = false
          }
        })
        //从发运记录过来的修改
        if (flag) {
          row.status = 3;
          self.assignList.unshift(row)
        }
        self.roadPoint[num].bottomTableData.forEach((d, i) => {
          if (d.id == row.id) {
            self.roadPoint[num].bottomTableData.splice(i, 1)
          }
        })
        self.clacFee();
      },
      selectLink(link) {
        let self = this;
        self.dialogSettlerVisible = false;
        self.saveForm.companyId = link.companyId
        self.saveForm.company = link.companyName
        self.saveForm.settlementId = link.linkmanId
        self.saveForm.settlementName = link.linkmanName
        self.saveForm.settlementPhone = link.linkmanPhone

        self.saveForm.driverId = null;
        self.saveForm.driverName = null;
        self.saveForm.driverPhone = null;
        self.saveForm.driverCardNumber = null;
        self.saveForm.licensePlateNumber = null;
      },
      //选怎司机
      selectDriverLink(link) {
        let self = this;
        self.dialogDriverVisible = false;
        self.saveForm.driverId = link.driverId ? link.driverId : null;
        self.saveForm.driverName = link.driverName;
        self.saveForm.driverPhone = link.phone;
        self.saveForm.driverCardNumber = link.driverCardNumber;
        self.saveForm.licensePlateNumber = link.licensePlateNumber;
      },
      removeLink() {
        let self = this;
        self.saveForm.companyId = null
        self.saveForm.company = null
        self.saveForm.settlementId = null
        self.saveForm.settlementName = null
        self.saveForm.settlementPhone = undefined
      },
      //清空
      clearFrom: function () {
        let self = this;
        self.removeLink();
        self.saveForm.pickCarFee = null;
        self.saveForm.driverName = null;
        self.saveForm.driverPhone = null;
        self.saveForm.driverCardNumber = null;
        self.saveForm.licensePlateNumber = null
        self.saveForm.collectionFee = null;
        self.saveForm.type = null;
        self.saveForm.transportType = null;
        self.saveForm.compartmentNo = null;
        self.saveForm.ticketNo = null;
        self.saveForm.transportNo = null;
        self.saveForm.id = null;
        self.saveForm.backReturnFee = null;
        self.saveForm.backReturnFee = null;
      },
      save() {
        let self = this;
        let ajaxData = {};
        let transportLevelVOList = [];
        if (self.saveForm.type == null || self.saveForm.type == '') {
          self.$notify({
            title: '提示',
            message: '请选择承运类型！',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (self.saveForm.transportType == null || self.saveForm.transportType == '') {
          self.$notify({
            title: '提示',
            message: '请选择运输方式！',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        if (self.saveForm.companyId == null || self.saveForm.settlementId == null || self.saveForm.settlementPhone == '') {
          self.$notify({
            title: '提示',
            message: '请填写公司名称，结算人，结算电话！',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        // if (self.saveForm.type == 1 && self.saveForm.transportType == 1 && (self.saveForm.driverName == null || self.saveForm.driverPhone == null)) {
        //   self.$notify({
        //     title: '提示',
        //     message: '请填写司机姓名电话！',
        //     position: 'bottom-right',
        //     type: 'warning'
        //   });
        //   return
        // }
        let flag = false;
        self.roadPoint.forEach((d, i) => {
          if (d.type == 1 || d.type == 3) {
            if (d.siteId == null || d.receiveUser == null || d.receiveUser == '请选择' || d.settlementType == null) {
              flag = true;
            }
          } else if (d.type == 4) {
            if (d.transferCityCode == null || d.transferCityCode == '' || d.receiveUser == null || d.receiveUser == '' || d.receivePhone == null || d.receivePhone == '') {
              flag = true
            }
          } else {
            if (d.receiveUser == null || d.receiveUser == '' || d.receivePhone == null || d.receivePhone == '') {
              flag = true
            }
          }
        })
        if (flag) {
          self.$notify({
            title: '提示',
            message: '请仔细核对所有途径点的交付信息、交付方式以及对应的信息！',
            position: 'bottom-right',
            type: 'warning'
          });
          return;
        }
        let carFlag = false;
        let costFlag = false;
        self.roadPoint.forEach((d, i) => {
          if (d.type == 2) {
            d.bottomTableData.forEach((obj) => {
              if (d.receiveUser != obj.consigneeName) {
                carFlag = true
              }
            })
          }
          if (d.bottomTableData) {
            d.bottomTableData.forEach((obj) => {
              if (obj.cost === '' || obj.cost == null || obj.cost == undefined) {
                costFlag = true
              }
            })
          }
        })
        if (carFlag) {
          self.$notify({
            title: '提示',
            message: '直接客户必须选择相同的接车人！',
            position: 'bottom-right',
            type: 'warning'
          });
          return;
        }
        if (costFlag) {
          self.$notify({
            title: '提示',
            message: '所有的应付承运费必填！',
            position: 'bottom-right',
            type: 'warning'
          });
          return;
        }
        self.$refs.saveForm.validate((valid) => {
          if (valid) {
            self.$confirm('是否确定保存?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              ajaxData = {...self.saveForm};
              [...transportLevelVOList] = self.roadPoint;
              transportLevelVOList.forEach((d, i) => {
                if (d.bottomTableData) {
                  d.reserved = 0;
                  [...d.transportLevelDetailList] = d.bottomTableData
                  d.transportLevelDetailList.forEach(_d => {
                    if (_d.deliveryPayFee && d.type == 2) {
                      _d.hasCollection = 1
                    } else {
                      _d.hasCollection = 0
                    }
                    // if (!self.$route.query.id) {
                    _d.orderId = _d.orderId ? _d.orderId : _d.id;
                    // }
                  })
                } else {
                  d.reserved = 1
                }
              })
              ajaxData.transportLevelVOList = transportLevelVOList;
              console.log(ajaxData)
              if (!self.isWaybill) {
                if (self.$route.query.id) {
                  ajaxData.id = self.$route.query.id;
                  api.updateTransport(ajaxData).then(res => {
                    if (res.code == 0) {
                      self.$notify({
                        title: '保存',
                        message: res.msg,
                        position: 'bottom-right',
                        type: 'success'
                      });
                      self.$router.push({path: '/transportop/assign'});
                      self.$router.push({path: '/transportop/assignRecord'});
                    } else {
                      self.$notify({
                        title: '保存',
                        message: res.msg,
                        position: 'bottom-right',
                        type: 'error'
                      });
                    }
                  })
                } else {
                  api.saveBatch(ajaxData).then(res => {
                    if (res.code == 0) {
                      self.$notify({
                        title: '保存',
                        message: res.msg,
                        position: 'bottom-right',
                        type: 'success'
                      });
                      self.queryList();
                    } else {
                      self.$notify({
                        title: '保存',
                        message: res.msg,
                        position: 'bottom-right',
                        type: 'error'
                      });
                    }
                  })
                }

              } else {
                api.entrucking(ajaxData).then(res => {
                  if (res.code == 0) {
                    self.$notify({
                      title: '保存',
                      message: res.msg,
                      position: 'bottom-right',
                      type: 'success'
                    });
                    self.queryList();
                  } else {
                    self.$notify({
                      title: '保存',
                      message: res.msg,
                      position: 'bottom-right',
                      type: 'error'
                    });
                  }
                })
              }
            }).catch(() => {
            });
          } else {
            return
          }
        })
      },
      //签收装车选择运单
      signToTransport: function () {
        let self = this;
        self.dialogVisible = true;
        api.signToTransport({
          current: 1,
          size: 999
        }).then(res => {
          self.waybillTableData = res.data.list;
        })
      },
      //选择
      selectData: function (row) {
        let self = this;
        self.isWaybill = true;
        self.saveForm.transportNo = row.transportNo;
        self.saveForm.id = row.id;
        self.saveForm.companyId = row.companyId;
        self.saveForm.company = row.companyName;
        self.saveForm.settlementId = row.settlementId;
        self.saveForm.settlementName = row.settlementName;
        self.saveForm.type = row.type;
        self.saveForm.transportType = row.transportType;
        self.saveForm.compartmentNo = row.compartmentNo;
        self.saveForm.ticketNo = row.ticketNo;
        self.saveForm.settlementPhone = row.settlementPhone;
        self.saveForm.driverName = row.driverName;
        self.saveForm.driverPhone = row.driverPhone;
        self.saveForm.licensePlateNumber = row.licensePlateNumber;
        self.dialogVisible = false;
      },
      //新增结算人
      addSettlerList: function () {
        let self = this;
        self.$refs.settlerManage.addDriver();
      },
      //新增司机
      addDriverList: function () {
        let self = this;
        self.$refs.driverManage.addDriver();
      },
      //显示结算人窗口
      showGetList: function () {
        let self = this;
        if (self.saveForm.type == null || self.saveForm.type == '') {
          self.$notify({
            title: '公司信息',
            message: '请先选择承运类型',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        self.dialogSettlerVisible = true;
      },
      //清空司机窗口
      clearDriver: function () {
        let self = this;
        self.saveForm.driverPhone = null;
        self.saveForm.licensePlateNumber = null;
      },
      //显示司机窗口
      showDriverList: function () {
        let self = this;
        if (self.saveForm.companyId == null || self.saveForm.companyId == '') {
          self.$notify({
            title: '司机信息',
            message: '请先选择公司信息',
            position: 'bottom-right',
            type: 'warning'
          });
          return
        }
        self.dialogDriverVisible = true;
      }
    }

  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      //display: flex;
      position: fixed;
      bottom: 0;
      height: 36vh;
      width: 99vw;
      z-index: 999;
      background-color: #fff;
      //flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 34px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .line {
          border-right: 1px #e3e3e3 solid;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
  ::v-deep .el-table__row {
    height: 55px !important;
  }
</style>